<template>
  <div>
    <el-form size="small" label-width="120px" :inline="true">
      <el-form-item label="优惠券名称：">
        <el-input
          v-model="tableFrom.coupon_name"
          placeholder="请输入优惠券名称"
          class="selWidth mr20"
          clearable
          @keyup.enter.native="getList(1)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            class="el-button-solt"
            @click="getList(1)"
          />
        </el-input>
      </el-form-item>
      <el-form-item label="优惠券类型：">
        <el-select
          v-model="tableFrom.type"
          placeholder="请选择"
          class="filter-item selWidth mr20"
          clearable
          @change="getList(1)"
        >
          <el-option label="全部" value="" />
          <el-option label="通用券" :value="10" />
          <el-option label="品类券" :value="11" />
          <el-option label="跨店券" :value="12" />
        </el-select>
      </el-form-item>
      <el-form-item label="获取方式：">
        <el-select
          v-model="tableFrom.send_type"
          placeholder="请选择"
          class="filter-item selWidth mr20"
          clearable
          @change="getList(1)"
        >
          <el-option label="全部" value="" />
          <el-option label="手动领取" :value="0" />
          <!-- <el-option label="消费满赠券" :value="1" /> -->
          <el-option label="新人券" :value="2" />
          <el-option label="赠送券" :value="3" />
          <!-- <el-option label="首单赠送券" :value="4" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select
          v-model="tableFrom.status"
          placeholder="请选择"
          class="filter-item selWidth mr20"
          clearable
          @change="getList(1)"
        >
          <el-option label="未开启" :value="0" />
          <el-option label="开启" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData.data"
      ref="table"
      class="mt25"
      :loading="loading"
      height="430"
    >
       <el-table-column prop="coupon_id" label="ID" min-width="50" />
       <el-table-column prop="title" label="优惠劵名称" min-width="120" />
      <el-table-column label="优惠劵类型" min-width="90">
          <template slot-scope="{ row }">
            <span v-if="row.type == 10"> 通用券</span>
            <span v-if="row.type == 11"> 品类券</span>
            <span v-if="row.type == 12"> 跨店券</span>
          </template>
        </el-table-column>
      <el-table-column min-width="200" label="领取日期">
          <template slot-scope="{ row }">
            <div v-if="row.start_time">
              {{ row.start_time }} <br />- {{ row.end_time }}
            </div>
            <span v-else>不限时</span>
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="使用时间">
          <template slot-scope="{ row }">
            <div v-if="row.use_start_time && row.use_end_time">
              {{ row.use_start_time }} <br />- {{ row.use_end_time }}
            </div>
            <span v-else>{{ row.coupon_time }}天</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="发布数量">
          <template slot-scope="{ row }">
            <span v-if="row.is_limited === 0">不限量</span>
            <div v-else>
              <span class="fa">发布：{{ row.total_count }}</span>
              <span class="sheng">剩余：{{ row.remain_count }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="使用数量">
          <template slot-scope="{ row }">
            <div>
              <span>已领取/发放总数：{{ row.send_num }}</span>
              <span class="sheng">已使用总数：{{ row.used_num }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="显示"
              inactive-text="隐藏"
              @click.native="onchangeIsShow(scope.row)"
            />
          </template>
        </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            slot="reference"
            @click="handleEdit(scope.$index, scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="acea-row row-right page">
      <el-pagination
        :page-sizes="[20, 40, 60, 80]"
        :page-size="tableFrom.limit"
        :current-page="tableFrom.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>

import { couponListApi } from "@/api/marketing";
import { formatDate } from "@/utils/validate";

export default {
  name: "index",
  filters: {
    formatDate(time) {
      if (time !== 0) {
        let date = new Date(time * 1000);
        return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    },
  },
  props: {
    couponids: {
      type: Array,
    },
    updateIds: {
      type: Array,
    },
    updateName: {
      type: Array,
    },
    luckDraw: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      props: {
        emitPath: false,
      },
      currentid: 0,
      productRow: {},
      loading: false,
      merCateList: [],
      tableFrom: {
        page: 1,
        limit: 20,
        status: "",
        coupon_name: "",
        type: "",
        send_type: "",
      },
      total: 0,
      ids: [],
      texts: [],
      tableData: {
        total: 0,
        data: [
          {
            coupon_id: 1,
            title: "优惠券1",
            type: 10,
            start_time: "",
            end_time: "",
            use_start_time: "",
            use_end_time: "",
            coupon_time: 100,
            is_limited: 0,
            total_count: 10,
            remain_count: 5,
            send_num: 5,
            status: 2,
          },
          {
            coupon_id: 1,
            title: "优惠券2",
            type: 10,
            start_time: "",
            end_time: "",
            use_start_time: "",
            use_end_time: "",
            coupon_time: 100,
            is_limited: 0,
            total_count: 10,
            remain_count: 5,
            send_num: 5,
            status: 2,
          },
          {
            coupon_id: 1,
            title: "优惠券3",
            type: 10,
            start_time: "",
            end_time: "",
            use_start_time: "",
            use_end_time: "",
            coupon_time: 100,
            is_limited: 0,
            total_count: 10,
            remain_count: 5,
            send_num: 5,
            status: 2,
          },
        ],
      },

      selectedIds: new Set(),
      selectedNames: new Set(),
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    //对象数组去重；
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    handleEdit(index, row) {
      this.$emit("getCouponId", row);
    },

    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num || this.tableFrom.page;
      couponListApi(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList("");
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList("");
    },
  },
};
</script>

<style scoped></style>
